<template>
  <header class="header">
    <h1>todos</h1>
    <input
      v-model="checkedAll"
      id="toggle-all"
      class="toggle-all"
      type="checkbox"
    />
    <label for="toggle-all"></label>
    <input
      v-model="task"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="addTask"
    />
  </header>
</template>

<script>
/**
 * 需求：新增任务，输入任务敲击回车，新增代办任务
 * 1、 v-model绑定输入框，获取用户输入内容
 * 2、 给输入框绑定键盘事件，监听回车按键（enter修饰符），并声明事件处理函数
 * 3、子传父，将数据传递给父组件
 * 4、父组件中，通过绑定自定义事件接收数据，在对应的事件处理函数中新增代办任务
 *
 * 需求2：点击全选，将全选框的状态同步给小选框，设置全选框的初始值(当小选框全部选中的时候全选框也就能自动选中)
 *
 * 1、父传子，将showArr数组传递给TodoHeader组件
 * 2、声明计算属性checkedAll，绑定全选框
 * 3、在计算属性的get函数，统计小选框的状态值，设置全选框的初始值
 * 4、在计算属性中的set函数中，将全选框的状态值同步给小选框
 *
 */
export default {
  props: ["arr"],
  data() {
    return {
      task: "",
    };
  },
  methods: {
    // 添加任务
    addTask() {
      if (!this.task) {
        alert("任务名不能为空！");
        return;
      }
      // 子传父，通知父组件新增任务
      this.$emit("sendData", this.task);
      this.task = "";
    },
  },
  computed: {
    checkedAll: {
      set(bool) {
        // console.log(bool);
        this.arr.forEach((item) => {
          item.isDone = bool;
        });
      },
      get() {
        // 设置全选框的状态值
        if (this.arr.length == 0) {
          return false;
        }
        return this.arr.every((item) => item.isDone == true);
      },
    },
  },
};
</script>